<template>
	<view class="container">
	    <view class="status-box">
	        <view class="status-label" :class="index == currentTpye ? 'active' : ''" v-for="(item,index) in statusType" :key="index" data-index="index" @click="changeTab(index)">
	            {{item}}
	            <!-- <view class="tabClass[index]" v-if="index!=0"></view> -->
	        </view>
	    </view>
	    <view class="order-list">
			<view class="no-order" v-if="list.length==0">
					<image src="../../static/image/no-order.png" class="no-order-img"></image>
					<view class="text">暂无订单</view>
			</view>
	        <view class="a-order" v-for="(item,index) in list" :key="index">
	            <view class="order-date">
	                <view class="date-box">时间：{{item.update_time}}</view>
	                <view class="status red" v-if="item.status==0">已取消</view>
					<view class="status red" v-if="item.status==10">未付款</view>
					<view class="status red" v-if="item.status==20">待发货</view>
					<view class="status red" v-if="item.status==21">退款审核 </view>
					<view class="status red" v-if="item.status==22">退款成功</view>
					<view class="status red" v-if="item.status==23">退款失败</view>
					<view class="status red" v-if="item.status==30">待收货</view>
					<view class="status red" v-if="item.status==40">已收货</view>
					<view class="status red" v-if="item.status==41">退货</view>
					<view class="status red" v-if="item.status==42">退货成功</view>
					<view class="status red" v-if="item.status==43">退货失败</view>
					<view class="status red" v-if="item.status==90">删除</view>
	            </view>
	           <!-- <view class="goods-info">
	                <view class="goods-des">
	                   <view>订单号: item.orderNumber</view>
	                </view>
	            </view> -->
	            <view>
					<view class="uni-list">
						<view class="uni-list-cell" hover-class="uni-list-cell-hover">
							<view class="uni-media-list" @click="godetails(item.order_sn)">
								<image class="uni-media-list-logo" :src="item.goods_image"></image>
								<view class="uni-media-list-body">
									<view class="uni-media-list-text-top">{{item.g_name}}</view>
									<!-- <view class="uni-media-list-text-bottom uni-ellipsis">{{value.company_title}}</view> -->
								</view>
								<view class="num">× {{item.goods_num}}</view>
							</view>
						</view>
					</view>
	            </view>
	            <view class="price-box">
	                <!-- <view class="total-price">合计：{{item.status==0||item.status==10?item.amount:item.pay_amount}}</view> -->
									<view class="total-price">合计：{{item.totle_price}}</view>
	                <view class="btn cancel-btn" v-if="item.status==10" @click="set_status(item.order_sn,0)">
										取消订单
									</view>
	                <view class="btn topay-btn" v-if="item.status==10" @click="gopay(item.amount,item.order_sn,item.order_pay_type)">
										马上付款
									</view>
									<view class="btn topay-btn" v-if="item.status==30" @click="set_status(item.order_sn,40)">
										确定收货
									</view>
								<!-- 	<view class="btn topay-btn" v-if="item.status==20" @click="set_status(item.order_sn,21)">
										申请退款
									</view>
									<view class="btn topay-btn" v-if="item.status==40" @click="set_status(item.order_sn,41)">
										申请退货
									</view> -->
	            </view>  
	        </view>
					<view class="loading" v-if="loading">
						<image src="../../static/image/loading.gif" mode=""></image>
						<text>努力加载中</text>
					</view>
	    </view>
	</view>
</template>

<script>
	import API from '@/common/api';
	export default {
		data(){
			return {
				statusType:["全部","待发货","待收货","待评价","退货"],
				currentTpye:0,
				tabClass: ["","","","",""],
				act:'qb',
				loading:false,
				list:[],
				page:1,
				row:5,
				status:false,
				userid:uni.getStorageSync("userid"),
			}
		},
		onLoad:function(res){
			let _this = this;
			switch(res.act){
				case 'qb': _this.act='qb';_this.currentTpye=0;this.status=false;break;
				case 'dfk': _this.act='dfk';_this.currentTpye=1;this.status=10;break;
				case 'dfh': _this.act='dfh';_this.currentTpye=2;this.status=20;break;
				case 'dsh': _this.act='dsh';_this.currentTpye=3;this.status=30;break;
				default : _this.act='tuih';_this.currentTpye=0;this.status=false;break;
			}
			this.selquster();
		},
		onShow:function(e){
			// console.log(e);
		},
		onPullDownRefresh:function(){
			this.act='qb';
			this.currentTpye=0;
			this.page=1;
			this.list=[];
			this.status=false;
			this.selquster();
		},
		onReachBottom:function(){
			let _this =this;
			_this.page++;
			_this.loading = true;
			this.selquster();
			
		},
		methods:{
			selquster(){
				if(this.status=false){
					this.mallOrder_list({page:this.page,rows:this.row,u_id:this.userid});//全部
				}else if(this.status==10){
					this.mallOrder_list({page:this.page,rows:this.row,u_id:this.userid,where:{is_send:0}});//待发货
				}else if(this.status==20){
					this.mallOrder_list({page:this.page,rows:this.row,u_id:this.userid,where:{is_confirm:0,is_send:1}});//待收货
				}else if(this.status==30){
					this.mallOrder_list({page:this.page,rows:this.row,u_id:this.userid,where:{is_confirm:1,is_comment:0}});//待评价
				}else{
					this.mallOrder_list({page:this.page,rows:this.row,u_id:this.userid,where:{is_shouhou:0}});//退货
				}
			},
			mallOrder_list(datas){
				var _this = this;
				uni.request({
					url:API.mallOrder_list,
					method:"GET",
					data:datas,//is_send:0    待收货  is_confirm:0  is_send:1   待评价   is_confirm:1   is_comment:0
					header:API.get_head(),
					success: (res) => {
						this.list =this.list.concat(res.data.rows);
						uni.stopPullDownRefresh();
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
						uni.stopPullDownRefresh();
					}
				})
			},
			
			
			gopay:function(amount,order_sn,where){
				
				let data = {
					order_sn:order_sn,
					money:parseFloat(amount).toFixed(2),
				}
				if(where==1){//礼品
					uni.navigateTo({
						url:"./gift_shop_pay?data="+JSON.stringify(data)
					})
				}else{//积分
					uni.navigateTo({
						url:"./shop_pay?data="+JSON.stringify(data)
					})
				}
				
			},
			godetails:function(e){
				uni.navigateTo({
					url:'./order-details?order_sn='+e,
				})
			},
			changeTab:function(index){
				this.list = [];
				this.page = 1;
				this.currentTpye = index;
				switch(index){
					case 0: this.status=false;break;
					case 1: this.status=10;break;
					case 2:this.status=20;break;
					case 3:this.status=30;break;
					default :this.status=false;break;
				}
				if(this.status==false){
					this.store_order_lists({page:this.page,list_rows:this.row})
				}else{
					this.store_order_lists({page:this.page,list_rows:this.row,status:this.status})
				}
			},
			//获取购物车列表
			async store_order_lists(dataup) {
				const resData = await API.store_order_lists(dataup);
				if(resData.code==200){
					this.list =this.list.concat(resData.data.data)
					// console.log(this.list)
				}
				this.loading = false;
				uni.stopPullDownRefresh();
			},
			set_status:function(order_sn,stu){
				let _this=this;
				if(stu==0){
					uni.showModal({
						title:"提示",
						content:"是否取消订单",
						success:function(e){
							if(e.confirm){
								var data = {"order_sn":order_sn,"status":stu};
								_this.store_order_status(data);
							}
						}
					})
				}else if(stu==21){
					uni.showModal({
						title:"提示",
						content:"是否申请退款",
						success:function(e){
							if(e.confirm){
								var data = {"order_sn":order_sn,"status":stu};
								_this.store_order_status(data);
							}
						}
					})
				}else if(stu==41){
					uni.showModal({
						title:"提示",
						content:"是否申请退货",
						success:function(e){
							if(e.confirm){
								var data = {"order_sn":order_sn,"status":stu};
								_this.store_order_status(data);
							}
						}
					})
				}else if(stu==40){
					uni.showModal({
						title:"提示",
						content:"是否确定收货",
						success:function(e){
							if(e.confirm){
								var data = {"order_sn":order_sn,"status":stu};
								_this.store_order_status(data);
							}
						}
					})
				}

			},
			//商城设置订单状态
			async store_order_status(dataup) {
				// console.log(dataup)
				const resData = await API.store_order_status(dataup);
				if(resData.code==200){
					uni.showToast({
						title:"操作成功",
					});
					uni.startPullDownRefresh();
				}
			},
			
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	/* page{height:auto;} */
.container{
    width: 100%;
    background-color: #F2f2f2;
}
.status-box{
    width:100%;
    height: 88upx;
    line-height: 88upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #fff; */
		position: fixed;
		top:0;
		background:#F8F8F8;
		z-index:100;
}
.status-box .status-label{
    width: 150upx;
    height: 100%;
    text-align: center;
    font-size:28upx;
    color:#353535;
    box-sizing: border-box;
    position: relative;
	line-height:88upx;
}
.status-box .status-label.active{
    color:#e64340;
    border-bottom: 6upx solid #e64340;
}
.status-box .status-label .red-dot{
    width: 16upx;
    height: 16upx;
    position: absolute;
    left: 116upx;
    top:23upx;
    background-color: #f43530;
    border-radius: 50%;
}
.no-order{
    width: 100%;
    position: absolute;
    bottom: 0;
    top: 88upx;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 203upx;
    background-color: #F2f2f2;
}
.no-order-img{
    width: 81upx;
    height: 96upx;
    margin-bottom: 31upx;
}
.no-order .text{
    font-size:28upx;
    color:#999999;
    text-align: center
}
.order-list{
    width: 100%;
		padding-top:88upx;
}
.order-list .a-order{
    /* width: 100%; */
    background-color: #fff;
    margin: 20upx;
		border-radius:20upx;
}
.order-list .a-order .order-date{
    padding: 0 30upx;
    height: 88upx;
    display: flex;
    justify-content: space-between;
    font-size:26upx;
    color:#000000;
    align-items: center;
}
.order-list .a-order .order-date .red{
    font-size:26upx;
    color:#e64340;
}
.a-order  .goods-info,
.goods-img-container{
    width: 720upx;
    margin-left: 30upx;
    border-top: 1upx solid #eee;
    border-bottom: 1upx solid #eee;
    padding: 30upx 0;
    display: flex;
    align-items: center;
}
.goods-info .img-box{
    width: 120upx;
    height: 120upx;
    overflow: hidden;
    margin-right: 30upx;
    background-color: #f7f7f7;
}
.goods-info .img-box .goods-img,
.goods-img-container .img-box .goods-img{
    width: 120upx;
    height: 120upx;
}
.goods-info  .goods-des{
    width: 540upx;
/*    height: 78upx;
    line-height: 39upx; */
    font-size:26upx;
    color:#000000;
    overflow: hidden;
}
.goods-img-container{
    height: 180upx;
    box-sizing: border-box;
    white-space: nowrap;
}
.goods-img-container .img-box{
    width: 120upx;
    height: 120upx;
    overflow: hidden;
    margin-right: 20upx;
    background-color: #f7f7f7;
    display: inline-block;
}
.order-list .a-order .price-box{
    position: relative;
    /* width: 720upx; */
    /* height: 100upx; */
    margin-left: 30upx;
    box-sizing: border-box;
    padding: 20upx 30upx 20upx 0;
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    font-size:26upx;
		overflow:hidden;
}
.order-list .a-order .price-box .total-price{
    font-size:26upx;
    color:#e64340;
		text-align: right;
		margin-bottom:10upx;
}
.a-order .price-box .btn{
    width: 166upx;
    height: 60upx;
    box-sizing: border-box;
    text-align: center;
    line-height: 60upx;
    border-radius:30upx;
		margin-left:10upx;
		float:right;
}
.a-order .price-box .cancel-btn{
    border: 1upx solid #ccc;
}
.a-order .price-box .topay-btn{
    border:1upx solid #e64340;
    color: #e64340;
}






.uni-media-list-logo{
	height:120upx;
	width:120upx;
}

/*加载中*/
.loading image{width:50upx;height:50upx;vertical-align: middle;margin:20upx 10upx 20upx 0;}
.loading{font-size:30upx;color: #999999;text-align: center;height:90upx;}

/**/
.uni-list-cell:before{display:none;}
.uni-list-cell:after{display:none;}

.uni-media-list{position:relative;}
.num{position: absolute;right:30upx;bottom:22upx;}
.uni-media-list-text-top{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
</style>
